iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

JS進入新手村,我好害怕系列 第 4

Day4:進入新手村前先讓我複習一下QQ-CSS3-Flexbox-基本用途

  • 分享至 

  • xImage
  •  

Flexbox是CSS3的盒模型,這個屬性是用來做排版使用,也因為它可以靈活彈性排版的特性,也很常使用在RWD(響應式設計)上面。

當下了flex語法之後,裡面的排列方式會分成橫軸與縱軸(直軸),概念有點像是以前國中時期所學的座標,就是X軸Y軸的概念,不過有點不一樣的是,XY軸以正向來說起始點會是在左下角,如果忘記的話我簡單畫個圖喚醒一下大家國中面對考試的痛苦(大誤)。

但是在使用flex的時候,預設的起始點則是在左上角,不過也可以使用語法做排列上的修改

他會有各種不同可以排版的方式,在使用flex之前,區塊元素預設會是由上往下排列,但是如果使用flex,預設則會變成由左到右,不過這也是可以依照需求去另外寫語法做調整的。

以下是沒有使用flex

<style>
 .container{

     margin: 10px;
     flex-wrap: wrap;
     border: 1px solid blue;
 }
 .item1{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:green;
 }
 .item2{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:yellow;
 }
 .item3{
     color:white;
     text-align:center;
     line-height: 50px;
     height:50px;
     width:50px;
     background-color:gray;
 }
 
 </style>    
<div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
 </div>

https://ithelp.ithome.com.tw/upload/images/20210917/20130509EkKTo7RHT1.jpg

以下是在container加上display:flex後的效果

 <style>
.container-2{
    display:flex;
    margin: 10px;
    flex-wrap: wrap;
    border: 1px solid blue;
}
.item1{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:green;
}
.item2{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:yellow;
}
.item3{
    color:white;
    text-align:center;
    line-height: 50px;
    height:50px;
    width:50px;
    background-color:gray;
}

https://ithelp.ithome.com.tw/upload/images/20210917/20130509KRSLKqgF1r.jpg

flex可以設定一些排列方式,有分成容器(container),以及內容物(item),這些語法部分我們會在下一篇提到。


上一篇
Day3:進入新手村前先讓我複習一下QQ-CSS-box-sizing
下一篇
Day5:進入新手村前先讓我複習一下QQ-CSS-flexbox-用在外層容器的屬性
系列文
JS進入新手村,我好害怕30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言